<%@page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
      <title>API接口查询</title>
      <link rel="stylesheet" href="/static/api.css">
      <script type="text/javascript" src="/static/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         var url="${url}";
         var time=0;
         var context;
         $(document).ready(function(){
        	 setCss();
        	 //获取所有的API接口信息
        	 queryApiList();
        	 
        	 //time=setInterval("chooseFirstLi()",100);
         });
         
         
         function chooseFirstLi(){
        	 var len=$(".api_info").eq(0).length;
        	 if(len>0){
        		 clearInterval(time);//清除定时任务
        		 $(".api_info").eq(0).trigger('click');//默认选择第一个
        	 }
         }
         
         function setCss(){
        	 var vheight=$(window).height();
        	 var divHeight=vheight-$(".top").height();
        	 $(".body").css("height",divHeight+"px");
        	 $(".body > .d1").css("height",divHeight+"px");
        	 $(".body > .d2").css("height",divHeight+"px");
         }
         
         function queryApiList(){
        	 $("#apiList").empty();//清空
        	 var reqUrl=url+"/api/getApiList";
        	 $.ajax({
        		  url:reqUrl,
        		  type:'post',
        		  dataType:'json',
        		  success:function(result){
        			  if(200==result.code){
        				  var data=result.data;
        				  if(data==null){
        					  alert("暂无API接口数据");
        				  }else{
        					  var apiList=data.apiList;
        					  if(apiList==null || apiList.length==0){
        						  alert("暂无API接口数据");
        					  }else{
        						  for(var i=0;i<apiList.length;i++){
        							  var firName=apiList[i].firName;
        							  var firList=apiList[i].firList;
        							  var li='<li>';
        							  li   +='    <p>';
        							  li   +=       firName;
        							  li   +='    </p>';
        							  if(firList!=null && firList.length>0){
        								 li         +='    <ul>';
        								 for(var j=0;j<firList.length;j++){
        									 var type=firList[j].type;
        									 var name=firList[j].name;
           								     var url=firList[j].url;
           								     var id=firList[j].id;
           								     var sure=firList[j].sure;
           								     if('1'==type){
           								    	if('0'==sure){
           								    	   li +='          <li class="api_info" style="color:black;" type="'+type+'"  sure="'+sure+'" onclick="queryApiInfo(\''+id+'\',this)">';
           								    	}else{
           								    	   li +='          <li class="api_info" style="color:red;" type="'+type+'" sure="'+sure+'" onclick="queryApiInfo(\''+id+'\',this)">';
           								    	}
           								     }else if('3'==type){
           								    	if('0'==sure){
            								       li +='          <li class="api_info"  style="color:black;background:yellow" type="'+type+'" sure="'+sure+'" onclick="queryApiInfo(\''+id+'\',this)">';
           								    	}else{
           								    	   li +='          <li class="api_info"  style="color:red;background:yellow" type="'+type+'" sure="'+sure+'" onclick="queryApiInfo(\''+id+'\',this)">';
           								    	}
           								     }else{
           								    	  li   +='         <li class="api_info"  style="color:white;background:grey" type="'+type+'" sure="'+sure+'" onclick="queryApiInfo(\''+id+'\',this)">';
           								     }
           								     
           								     var value=url+"("+name+")"
           								     li      +='              <p><span>'+value+'</span><span class="img" style="display:none;margin-left:2px;"><img src="/static/choose.jpg" style="width:15px;height:15px;"/></span></p>';
           								     li      +='           </li>';
        								 }
        								 li   +='    </ul>';
        							  }
        							  li   +='</li>';
        							  $("#apiList").append(li);
        						  }
        					  }
        				  }
        			  }else{
        				  alert(result.msg);
        			  }
        		  },
        		  error:function(){
        			  alert("初始化查询API接口列表异常");
        		  }
        	 });
         }
         
         var key_id='';
         function queryApiInfo(id,dom){
        	 setCss();
        	 //保证只选中一个，其他的不显示
        	 $(dom).find(".img").eq(0).show();
        	 $(dom).siblings().find(".img").hide();
        	 $(dom).parent().parent().siblings().find(".img").hide();
        	 
        	 var apiType=$(dom).attr("type");//修改类型  1-新增  2-废弃  3-更新
        	 if("2"!=apiType){//已废弃
        		 key_id=id;
        		 $("#hideDiv").show();
        	 }
        	 $("#inputDiv").empty();//每次都清空内容
        	 $("#tab").empty();//每次都清空内容
        	 $("#format_info").empty();
        	 var reqUrl=url+"/api/getApiDetail";
        	 $.ajax({
        		 url:reqUrl,
        		 type:'post',
       		     dataType:'json',
       		     data:{"colFatherId":id,"apiType":apiType},
       		     success:function(result){
       		    	if(200==result.code){
       		    	    var data=result.data;
       		    	    if(data!=null){
       		    	    	var inputList=data.input;//入参
       		    	        var outputList=data.output;//出参
       		    	        var tab1=getTable(inputList,1);
       		    	        var tab2=getTable(outputList,2);
       		    	        $("#inputDiv").html(tab1);
       		    	        $("#tab").html(tab2);
       		    	        if(outputList!=null && outputList.length>=0){ //展示数据格式
       		    	        	var format=data.outFormat;
       		    	        	$("#format_info").html(format);
       		    	        }
       		    	    }else{
       		    	    	alert(result.msg);
       		    	    }
       		    	}else{
       		    		alert(result.msg);
       		    	}
       		     },
       		     error:function(){
       		    	alert("初始化查询接口详情信息异常");
       		     }
        	 });
         }
         
         //将Y/N转换
         function check_Y_N(param){
        	 if(""==param || null==param){
        		 return '';
        	 }
        	 if('Y'==param){
        		 return '是';
        	 }
        	 return '否';
        	 
         }
         
         function getTable(list,type){
        	var str='';
        	if(1==type){
        		str='入参:';
        	}else{
        		str='出参:';
        	}
        	var table  ='<p>'+str+'</p>';
    	    table     +='<table>';
 	        table     +='   <tr class="t_head">';
 	        table     +='     <td>参数</td>';
 	        table     +='     <td>参数注释</td>';
 	        table     +='     <td>类型</td>';
 	        table     +='     <td>长度</td>';
 	        table     +='     <td>是否必传</td>';
 	        table     +='     <td>是否对象</td>';
 	        table     +='     <td>是否数组</td>';
 	        table     +='     <td>变更类型</td>';
 	        table     +='     <td>元素层级</td>'
 	        table     +='     <td>归属父元素</td>';
 	        table     +='   </tr>';
   	        if(list!=null && list.length>0){
   	        	for(var i=0;i<list.length;i++){
   	        		var input=list[i];
   	        		var compareType=input.compareType;
   	        		var change='';
   	        		
   	        		var style_2='';
   	        		var style_3='';
   	        		var style_4='';
   	        		var style_5='';
   	        		var style_6='';
   	        		var style_7='';
   	        		if(compareType.indexOf("1")!=-1 || compareType=='0'){
   	        			change ='最新,';
   	        		}
                    if(compareType.indexOf("2")!=-1){
   	        			change +='变更类型,';
   	        			style_2='background:yellow;color:red';
   	        		}
                    if(compareType.indexOf("3")!=-1){
   	        			change +='变更非空约束,';
   	        			style_3='background:yellow;color:red';
   	        		}
                    if(compareType.indexOf("4")!=-1){
   	        			change +='变更是否为集合,';
   	        			style_4='background:yellow;color:red';
   	        		}
                    if(compareType.indexOf("5")!=-1){
   	        			change +='变更是否为对象,';
   	        			style_5='background:yellow;color:red';
   	        		}
                    if(compareType.indexOf("6")!=-1){
   	        			change +='变更长度,';
   	        			style_6='background:yellow;color:red';
   	        		}
                    if(compareType.indexOf("7")!=-1){
   	        			change='废弃,';
   	        			style_7='background:grey;color:red';
   	        		}
                    change=change.substring(0,change.lastIndexOf(","))
   	        		console.log("change=="+change);
   	        		
   	        		table +='<tr>';
   	        		table +='  <td>'+input.col+'</td>';
   	        		table +='  <td>'+input.colName+'</td>';
   	        		var attribute=null;
   	        		if('int'==input.attr){
   	        			attribute='Integer';
   	        		}else{
   	        			attribute=input.attr;
   	        		}
   	        		table +='  <td style="'+style_2+'">'+attribute+'</td>';
   	        		table +='  <td style="'+style_6+'">'+input.length+'</td>';
   	        		table +='  <td style="'+style_3+'">'+check_Y_N(input.isNull)+'</td>';
   	        		table +='  <td style="'+style_5+'">'+check_Y_N(input.isObject)+'</td>';
   	        		table +='  <td style="'+style_4+'">'+check_Y_N(input.isList)+'</td>';
   	        		table +='  <td style="'+style_7+'">'+change+'</td>';
   	        		table +='  <td>1</td>';
   	        		table +='  <td>无</td>';
   	        		table +='</tr>';
   	        		if('Y'==input.isList || 'Y'==input.isObject){ //数组
   	        		   var sonList=input.sonList;//遍历获取次级元素
        			   if(sonList!=null && sonList.length>0){
        				   table +=getSonTd(sonList,1,input.col);
        			   }
   	        		}
   	        		
   	        	}
   	        }else{
   	        	table +='   <tr>';
   	        	table +='      <td colspan="10"></td>';
   	        	table +='   </tr>';
   	        }
   	        table     +='</table>';
   	        return table;
         }
         
         function getSonTd(sonList,num,father){
        	 num++;
        	 var td='<tr>';
        	 for(var j=0;j<sonList.length;j++){
        		 var son=sonList[j];
        		 var compareType=son.compareType;
        		 var change='';
        		 var style_2='';
        		 var style_3='';
        		 var style_4='';
        		 var style_5='';
        		 var style_6='';
        		 var style_7='';
        		 if(compareType.indexOf("1")!=-1 || compareType=='0'){
        			 change ='最新,';
        		 }
                 if(compareType.indexOf("2")!=-1){
	        			change +='变更类型,';
	        			style_2='background:yellow;color:red';
	        		}
                 if(compareType.indexOf("3")!=-1){
	        			change +='变更非空约束,';
	        			style_3='background:yellow;color:red';
	        		}
                 if(compareType.indexOf("4")!=-1){
	        			change +='变更是否为集合,';
	        			style_4='background:yellow;color:red';
	        		}
                 if(compareType.indexOf("5")!=-1){
	        			change +='变更是否为对象,';
	        			style_5='background:yellow;color:red';
	        		}
                 if(compareType.indexOf("6")!=-1){
	        			change +='变更长度,';
	        			style_6='background:yellow;color:red';
	        		}
                 if(compareType.indexOf("7")!=-1){
	        			change='废弃,';
	        			style_7='background:grey;color:red';
	        		}
                 change=change.substring(0,change.lastIndexOf(","))
	             console.log("change=="+change);
        		 
        		 td  +='<td>'+son.col+'</td>';
        		 td  +='<td>'+son.colName+'</td>';
        		 var bute=null;
        		 if('int'==son.attr){
        			 bute='Integer';
        		 }else{
        			 bute=son.attr;
        		 }
        		 td +='  <td style="'+style_2+'">'+bute+'</td>';
        		 td +='  <td style="'+style_6+'">'+son.length+'</td>';
        		 td +='  <td style="'+style_3+'">'+check_Y_N(son.isNull)+'</td>';
        		 td +='  <td style="'+style_5+'">'+check_Y_N(son.isObject)+'</td>';
        		 td +='  <td style="'+style_4+'">'+check_Y_N(son.isList)+'</td>';
        		 td +='  <td style="'+style_7+'">'+change+'</td>';
        		 td +='  <td>'+num+'</td>';
        		 td +='  <td>'+father+'</td>';
        		 td +='</tr>';
        		 if('Y'==son.isList || 'Y'==son.isObject){
        			 var secondList=input.sonList;
        			 if(secondList!=null && secondList.length>0){
        				 td  += getSonTd(secondList,num,son.col);//继续循环加载
        			 }
        		 }
        	 }
        	 td +='</tr>';
        	 return td;
         }
         
         function sureApi(){
        	 $("#hideDiv").hide();
        	 var reqUrl=url+"/api/sureApi";
        	 $.ajax({
        		 url:reqUrl,
        		 type:'post',
       		     dataType:'json',
       		     data:{"id":key_id},
       		     success:function(result){
       		    	 if(200==result.code){
       		    		 var data=result.data;
       		    		 var flag=data.flag;
       		    		 if('0'==flag){
       		    			$(window).reload();//重新加载页面内容
       		    		 }
       		    	 }else{
       		    		alert(result.msg);
       		    	 }
       		     },
       		     error:function(){
       		    	alert("api接口确认异常");
       		     }
        	 });
        	 
         }
         
         function unsureApi(){
        	 $("#hideDiv").hide();
         }
         
      </script>
  </head>
  <body>
     <nav class="top">
         <h3 align="center">API接口说明</h3>
     </nav>
     <div class="body">
         <div class="d1">
            <ul id="apiList">
            </ul>
         </div>
         <div class="d2" id="showInfo">
            <div class="d2_input" id="inputDiv"></div>
            <div class="d2_output" id="outputDiv">
               <div id="tab"></div>
               <div id="format">
                   <p id="format_info"></p>
               </div>
            </div>
         </div>
     </div>
     <div id="hideDiv">
        <div id="showDiv">
           <div class="showDiv_1">该接口参数后台已更新，是否确认显示这些变化?</div>
           <div class="showDiv_2">
                 <button  onclick="unsureApi();">取消</button >
                 <button  onclick="sureApi();">确认</button>
           </div>
        </div>
     </div>
     
     
     
  </body>
</html>